<template>
	<view class="positionMarket-page">
		<head-box></head-box>

		<view class="positionMarket-page-main">
			<view class="_main-top">
				<image class="_img" src="../../static/img/positionMarketbanner.png" mode="widthFix"></image>
			</view>
			<view class="top_select">
				<view class="item">
					<picker class="_choose-type" @change="cityPicker" :value="cityIndex" :range="cityArr">
						<view class="uni-input _choose-type-text">
							{{cityArr[cityIndex]}}
							<image class="drop-dowm-img" src="/static/img/drop-down.png" mode="widthFix"></image>
						</view>
					</picker>
				</view>
				<view class="item">
					<picker class="_choose-type" ref="dataPicker2" @change="typePicker" :value="typeIndex" :range="typeArr">
						<view class="uni-input _choose-type-text">
							{{typeArr[typeIndex]}}
							<image class="drop-dowm-img" src="/static/img/drop-down.png" mode="widthFix"></image>
						</view>
					</picker>
				</view>

			</view>

			<view class="zdcount">
				共计搜索到：{{total}} 个阵地
			</view>
			<view class="_main-content">

				<view class="_main-content-map">
					<div id="js-container" class="_map-box">正在加载中 ...</div>
				</view>

				<view class="_main-content-info" v-if="isShow">
					<view style='color: #333333;font-size:16px;textAlign:center;margin-bottom:10px; display: none;' @tap="Close"><img src='/static/close.png' style='height:30px;border-radius:4px;right: 30px;position: absolute;'></img></view>
					<view class="_main-content-info-header">
						<image class="line-img" src="../../static/img/positionMarket-line.png" mode=""></image>
						<view class="_header-title">阵地信息</view>

					</view>

					<view class="_main-content-info-chunk">
						<text class="_chunk-label">阵地名称：</text>
						<text class="_chunk-val">{{ info.frontName}}</text>
					</view>
					<view class="_main-content-info-chunk">
						<text class="_chunk-label">所属群团：</text>
						<text class="_chunk-val">{{gpinfoName}}</text>
					</view>
					<view class="_main-content-info-chunk">
						<text class="_chunk-label">服务对象：</text>
						<text class="_chunk-val">{{info.frontServiceobjDesc}}</text>
					</view>
					<view class="_main-content-info-chunk">
						<text class="_chunk-label">开放时间：</text>
						<text class="_chunk-val">{{info.frontOpenTime}}</text>
					</view>
					<view class="_main-content-info-chunk">
						<text class="_chunk-label">容纳人数：</text>
						<text class="_chunk-val">{{info.frontCapacity}}人</text>
					</view>
					<view class="_main-content-info-chunk">
						<text class="_chunk-label">收费标准：</text>
						<text class="_chunk-val">{{info.frontFee}}</text>
					</view>
					<view class="_main-content-info-chunk">
						<text class="_chunk-label">阵地地址：</text>
						<text class="_chunk-val">{{info.frontAddress}}</text>
					</view>

					<view class="_main-content-info-header">
						<image class="line-img" src="../../static/img/positionMarket-line.png" mode=""></image>
						<view class="_header-title">阵地简介</view>
					</view>

					<view class="_main-content-info-chunk">
						<text class="_chunk-val">{{info.frontIntroduce}}</text>
					</view>
					<view class="_main-content-option" @tap="hideModal" v-if="info.frontUrl==''"><text>电话预约活动</text></view>
					<view class="_main-content-option" @tap="handleLink('/pages/webview/webview?url='+info.frontUrl)" v-else><text>在线预约活动</text></view>
				</view>


			</view>
		</view>
		<view class="cu-modal" :class="telShow==true?'show':''">
			<view class="cu-dialog" style="background-color: #fff;">
				<view class="cu-bar bg-white justify-end">
					<view class="content">预约信息</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl" style="padding: 0px;">
					<view class="cu-form-group margin-top">
						<view class="title">预约电话：{{info.frontPhone}}</view>
					</view>
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn bg-green margin-left" @tap="makePhoneCall">一键拨打</button>
					</view>
				</view>
			</view>
		</view>
		<tabs-box></tabs-box>
	</view>
</template>

<script>
	const MapKey = '2fdfb67e8ce73a7cba9a36db8e87f957';
	const MapCityName = '杭州';
	import { gpFrontlist,gpGpinfo,getDictItems} from '@/common/request.js';
	export default {
		data() {
			return {
				id:'',
				total:0,
				info:{},
				gpinfoName:'',
				telShow:false,
				cityIndex:0,
				//cityArr:['全部城区','上城区','拱墅区','西湖区','滨江区','萧山区','余杭区','临平区','钱塘区','富阳区','临安区','桐庐县','淳安县','建德市'],
				//AreaCode:['','311500','310011','310013','310051','311200','311000',]
				cityArr:['全部城区'],
				AreaCode:[''],
				typeIndex:0,
				typeArr:['全部类型'],
				typeArrCode:[''],
				center:[120.218866,30.287668],
				covers: [{"lng":120.218866,"lat":30.287668,"name":"杭州市职工文化中心"}],
				AMapUI: null,
				AMap: null,
				isShow:false
			};
		},
		async created() {
					function remoteLoad(url, hasCallback) {
						return createScript(url);
						/**
						 * 创建script
						 * @param url
						 * @returns {Promise}
						 */
						function createScript(url) {
							let scriptElement = document.createElement('script');
							document.body.appendChild(scriptElement);
							let promise = new Promise((resolve, reject) => {
								scriptElement.addEventListener(
									'load',
									e => {
										removeScript(scriptElement);
										if (!hasCallback) {
											resolve(e);
										}
									},
									false
								);

								scriptElement.addEventListener(
									'error',
									e => {
										removeScript(scriptElement);
										reject(e);
									},
									false
								);

								if (hasCallback) {
									window.____callback____ = function() {
										resolve();
										window.____callback____ = null;
									};
								}
							});

							if (hasCallback) {
								url += '&callback=____callback____';
							}

							scriptElement.src = url;

							return promise;
						}

						/**
						 * 移除script标签
						 * @param scriptElement script dom
						 */
						function removeScript(scriptElement) {
							document.body.removeChild(scriptElement);
						}
					}
					// 已载入高德地图API，则直接初始化地图
					let params = {"frontAreaCode":this.frontAreaCode,"frontPublic":1}
					if (window.AMap && window.AMapUI) {
						gpFrontlist(1000,1,params).then(res => {
							if(res.success)
							{
								this.total = res.result.records.length;
								this.covers = []
								res.result.records.forEach(ele => {
									this.covers.push(ele)
								})
								this.initMap();
							}
						});
					} else {
						await remoteLoad(
							`https://webapi.amap.com/maps?v=1.4.4&key=${MapKey}&plugin=AMap.Geocoder,AMap.PlaceSearch,AMap.ToolBar`);
						await remoteLoad('https://webapi.amap.com/ui/1.0/main.js');
						gpFrontlist(1000,1,params).then(res => {
							if(res.success)
							{
								this.total = res.result.records.length;
								this.covers = []
								res.result.records.forEach(ele => {
									this.covers.push(ele)
								})
								this.initMap();
							}
						});
					}
				},
		onLoad(options) {
			var that = this
			if(!!options.id)
			{
				that.id = options.id;
			}
			this.gpinfoareacode();
			this.fronttype();
		},
    onShow(){
      // #ifdef H5
      console.log('分享')
      this.$wxSetShare()
      // #endif
    },
		methods:{
			typePicker(e){
				this.typeIndex = e.target.value
				this.frontType = this.typeArrCode[this.typeIndex]
				this.changeValue();
			},

			cityPicker(e) {
				this.cityIndex = e.target.value
				this.frontAreaCode = this.AreaCode[e.target.value]
				this.changeValue();
			},
			changeValue()
			{

				console.log('----------',this.frontAreaCode,this.frontType);
				let params = {"frontPublic":1}
				if(this.frontAreaCode != undefined)
					params["frontAreaCode"]=this.frontAreaCode;
				if(this.frontType != undefined)
					params["frontType"]="*"+this.frontType+"*";
				//"frontAreaCode":this.frontAreaCode,"frontType":"*"+this.frontType+"*",
				gpFrontlist(1000,1,params).then(res => {
					if(res.success)
					{
						this.total = res.result.records.length;
						this.covers = []
						res.result.records.forEach(ele => {
							this.covers.push(ele)
						})
						this.initMap();
					}
				});

			},
			gpinfoareacode()
			{
				var that = this
				let params = {}
				getDictItems(params,"gpinfo_area_code").then(res =>
				{
					if(res.success)
					{
						res.result.forEach(ele => {
							that.AreaCode.push(ele.value);
							that.cityArr.push(ele.text);
						})
					}
				})
			},
			fronttype(){
				var that = this
				let params = {}
				getDictItems(params,"front_type").then(res =>
				{
					if(res.success)
					{
						res.result.forEach(ele => {
							that.typeArrCode.push(ele.value);
							that.typeArr.push(ele.text);
						})
					}
				})
			},
			makePhoneCall(){
				uni.makePhoneCall({
				    phoneNumber: this.info.frontPhone
				});
			},
			hideModal(){
				this.telShow = !this.telShow;
			},
			Close(){
				this.isShow = false;
			},
			toBack() {
				uni.navigateBack({
					delta:1
				})
			},

			changePicker(pickerIndex) {
				this.$refs[`dataPicker${pickerIndex}`].$el.click();
			},
			handleLink(link) {
				uni.navigateTo({
					url:link
				})
			},
			// 实例化地图
			initMap() {
				let AMapUI = (this.AMapUI = window.AMapUI);
				let AMap = (this.AMap = window.AMap);
				let that = this;
				AMapUI.loadUI(['misc/PositionPicker'], PositionPicker => {

					let mapConfig = {
						zoom: 14,
						cityName: MapCityName
					};
					let map = new AMap.Map('js-container', mapConfig);
					let list = that.covers;
					let markers = [];
					console.log('that.id'+that.id)
					for (var i = 0; i < list.length; i++) {
						if(i===0)
						{
							that.center =[list[i].frontLongitude, list[i].frontDimension]
						}
						if(that.id==list[i].id)
						{
							that.center =[list[i].frontLongitude, list[i].frontDimension]
						}
						var marker = new AMap.Marker({
							position: [list[i].frontLongitude, list[i].frontDimension],
							icon: new AMap.Icon({
								image: '/static/img/marker.png',
								size: new AMap.Size(30, 30), //图标大小
								imageSize: new AMap.Size(30, 30)
							}),
							offset: new AMap.Pixel(-10, -10)
						});
						marker.info=list[i];
						marker.setMap(map);

						// label默认蓝框白底左上角显示，样式className为：amap-marker-label
						marker.setLabel({
							offset: new AMap.Pixel(0, -30), //设置文本标注偏移量
							content: "<div class='info' style='padding: 3px 5px;'>" + list[i].frontName + '</div>', //设置文本标注内容
							direction: 'center' //设置文本标注方位
						});
						//marker.positon = list[i].id;
						//鼠标点击marker弹出自定义的信息窗体
						marker.on('click', function(e) {
							console.log(e)
							that.isShow= true;
							that.info = e.target.info;
							gpGpinfo(that.info.gpinfoId).then(res => {
								if(res.success)
								{
									that.gpinfoName = res.result.gpinfoName;
								}
							});
						});
						markers.push(marker);
						map.setCenter(that.center)
					}
					map.on('click', function(e) {
						map.clearInfoWindow();
					});
					var infoWindow = new AMap.InfoWindow({
						isCustom: true, //使用自定义窗体
						offset: new AMap.Pixel(16, -30)
					});

					//构建自定义信息窗体
					function createInfoWindow(content) {
						var info = document.createElement('div');
						info.style.background = '#FFFFFF';
						info.style.width = '250px';
						info.style.height = '170px';
						info.style.textAlign = 'left';
						info.style.color = '#FFFFFF';
						info.style.padding = '16px';
						info.innerHTML = content;
						return info;
					}

					//关闭信息窗体
					function closeInfoWindow() {
						map.clearInfoWindow();
					}

					// 创建地图拖拽
					let positionPicker = new PositionPicker({
						mode: 'dragMarker', // 设定为拖拽地图模式，可选'dragMap','dragMarker'，默认为'dragMap'
						map: map // 依赖地图对象
					});

					// 拖拽完成发送自定义 drag 事件
					positionPicker.on('success', positionResult => {
						this.$emit('drag', {
							address: positionResult.regeocode.addressComponent.district +
								positionResult.regeocode.addressComponent.township +
								positionResult.regeocode.addressComponent.street +
								positionResult.regeocode.addressComponent.streetNumber,
							lng: positionResult.position.lng,
							lat: positionResult.position.lat
						});
						this.address = positionResult.address;
						openInfo([positionResult.position.lng, positionResult.position.lat]);
					});
					if (this.lat && this.lng) {
						mapConfig.center = [this.lng, this.lat];
						positionPicker.start([this.lng, this.lat]);
						map.panBy(0, 1);
					}
					AMap.plugin('AMap.Geolocation', function() {
						var geolocation = new AMap.Geolocation({
							enableHighAccuracy: true,//是否使用高精度定位，默认:true
							timeout: 10000,          //超过10秒后停止定位，默认：无穷大
							maximumAge: 0,           //定位结果缓存0毫秒，默认：0
							convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
							showButton: true,        //显示定位按钮，默认：true
							buttonPosition: 'LB',    //定位按钮停靠位置，默认：'LB'，左下角
							buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
							showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true
							showCircle: true,        //定位成功后用圆圈表示定位精度范围，默认：true
							panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true
							zoomToAccuracy:true      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
						});

						geolocation.getCurrentPosition();
						console.log(that.frontAreaCode);
						if(that.frontAreaCode==undefined || that.frontAreaCode=='')
						{
							console.log('开始定位');
							AMap.event.addListener(geolocation, 'complete', onComplete);
							AMap.event.addListener(geolocation, 'error', onError);
						}
						function onComplete(data) {
							// data是具体的定位信息
							console.log('定位成功');
							if(!!that.id) return;
							var x = data.position.lng;
							var y =  data.position.lat;
							console.log(data)
							map.setCenter([x,y])
							that.covers.push({"frontLongitude":x,"frontDimension":y,"frontName":"我的位置"})
							let markers = [];

							var marker = new AMap.Marker({
								position: [x,y],
								icon: new AMap.Icon({
									image: '/static/img/mys.png',
									size: new AMap.Size(30, 30), //图标大小
									imageSize: new AMap.Size(30, 30)
								}),
								offset: new AMap.Pixel(-10, -10)
							});
							marker.setMap(map);
							console.log('画按钮');

						}

						function onError(data) {
							// 定位出错
							console.log('定位出错');
							if(!!that.id) return;
							// 定位出错
							console.log('定位出错');
							var x = that.center[0];
							var y =  that.center[1];
							map.setCenter([x,y])
							that.covers.push({"frontLongitude":x,"frontDimension":y,"frontName":"我的位置"})
							let markers = [];

							var marker = new AMap.Marker({
								position: [x,y],
								icon: new AMap.Icon({
									image: '/static/img/mys.png',
									size: new AMap.Size(30, 30), //图标大小
									imageSize: new AMap.Size(30, 30)
								}),
								offset: new AMap.Pixel(-10, -10)
							});
							marker.setMap(map);
						}
					});
					// 坐标-地址转换
					var geocoder = new AMap.Geocoder({});
					AMap.plugin(['AMap.Autocomplete'], function() {
						// 输入提示
						var autoOptions = {
							input: 'complete'
						};
						var auto = new AMap.Autocomplete(autoOptions);
						var placeSearch = new AMap.PlaceSearch({}); // 构造地点查询类，注意：这里如果实例的时候设置了map，下面再自定义增加marker时，会导致marker点重复和相关的marker设置失效。
						AMap.event.addListener(auto, 'select', select); // 注册监听，当选中某条记录时会触发
						function select(e) {
							positionPicker.start([e.poi.location.lng, e.poi.location.lat]);
							map.panBy(0, 1);
							openInfo([e.poi.location.lng, e.poi.location.lat]);
							placeSearch.setCity(e.poi.adcode);
							placeSearch.setCityLimit(true);
							// placeSearch.search(e.poi.name, searchBack) // 关键字查询查询
						}
					});
					// 启用工具条
					AMap.plugin(['AMap.ToolBar'], function() {
						map.addControl(
							new AMap.ToolBar({
								position: 'RB'
							})
						);
					});
					// 在指定位置打开信息窗体
					function openInfo(lnglat) {
						// console.log(that)
						geocoder.getAddress(lnglat, function(status, result) {
							if (status === 'complete' && result.regeocode) {
								// outer.$emit('drag', {address: result.district + result.township + result.street + result.streetNumber, lng: lnglat['lng'], lat: lnglat['lat']})
								// 地址
								var address = result.regeocode.formattedAddress;
								// 构建信息窗体中显示的内容
								var info = [];
								info.push(
									"<p class='input-item' style='margin:0; line-height:25px'><span style='font-weight: bolder'>详细地址</span>: " +
									address + '</p>');
								info.push(
									"<p class='input-item' style='margin:0; line-height:25px'><span style='font-weight: bolder'>附近路口</span>: " +
									result.regeocode.addressComponent.street +
									result.regeocode.addressComponent.streetNumber +
									'</p>'
								);
								info.push(
									"<p class='input-item' style='margin:0; line-height:25px'><span style='font-weight: bolder'>附近街道</span>: " +
									result.regeocode.addressComponent.township +
									'</p>'
								);
								info.push('</div></div>'); // 可以根据自己需要，将获取到POI信息进行传递
								var infoWindow = new AMap.InfoWindow({
									content: info.join(''), // 使用默认信息窗体框样式，显示信息内容
									offset: new AMap.Pixel(0, -20)
								});
								infoWindow.open(map, lnglat);
							} else {
								alert(JSON.stringify(result));
							}
						});
					}

					// 启动拖放
					// positionPicker.start()
				});
			}
		}
	}
</script>

<style lang="scss">
	.left20{
		margin-left: 20rpx;
	}
	.zdcount{
		padding: 10rpx 40rpx;
		background-color: #fff;
	}
	.zdinput{
	}

	.top_select{
		display: flex;
		flex-direction: row;
		padding: 30rpx 40rpx;
		background-color: #fff;
		.item{
			width: 33%;
			text-align: left;
			font-size: 30rpx;
			._choose-type{
				image{
					width: 20rpx;
					margin-left: 10rpx;
				}
			}
		}
	}
	.positionMarket-page{
		width: 100%;
		box-sizing: border-box;
		background-color: #ffffff;
		min-height: 100vh;
		.top-fixed{
			position: fixed;
			top: 0;
			z-index: 1;
		}
		.top{
			width: 100%;
			height:100rpx;
			padding:0 30rpx;
			// background-color: #007AFF;
			background-color: #f7f7f7;
			box-shadow: 0 1px 6rpx #ccc;
			display:flex;
			justify-content:space-between;
			align-items: center;
			box-sizing: border-box;
			.top-text{
				color:#000;
				font-size:34rpx;
			}
		}
		.quntuanListPage-main-header{
			margin-right: 60rpx;
			.quntuanListPage-main-title{
				font-size: 32rpx;
				color: #333;
				font-weight: bold;
				border-left: 6rpx solid #0071fc;
				/*background-image:linear-gradient(left, #eff6ff, #ffffff);*/
				padding-left: 20rpx;
			}
		}
		.top-box{
			width: 100%;
			height: 100%;
			position: relative;
			text-align: center;
			line-height: 100rpx;
			.back-img{
				width:44rpx;
				height:40rpx;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin:auto;
				margin-left: 0rpx;
			}
		}
		.positionMarket-page-main{
			margin-bottom: 160rpx;
			._main-top{
				width: 100%;
				._img{
					width: 100%;
					height: 100%;
				}
			}
			._main-content-header{
				width: 100%;
				height: 80rpx;
				box-sizing: border-box;
				padding: 0 40rpx;
				display: flex;
				flex-wrap: nowrap;
				justify-content: flex-start;
				align-items: center;
				position: relative;
				margin-top: 20rpx;
				background-color: #fff;
				.line-img{
					width: 9rpx;
					height: 30rpx;
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					margin: auto;
					margin-left: 40rpx;
				}
				._header-title{
					font-size: 36rpx;
					color: #000;
					font-weight: 800;
					margin-left: 20rpx;
				}
				._header-chunk{
					display: flex;
					flex-wrap: nowrap;
					justify-content: space-between;
					align-items: center;
					min-width: 200rpx;
					max-width: 300rpx;
					background-color: #f6f6f6;
					border-radius: 10px;
					font-size: 30rpx;
					color: #000;
					height: 60rpx;
				}
				._main-item-val-input{
					text-align: left;
					display: flex;
					._main-item-val-input-text{
						display: flex;
						flex-wrap: nowrap;
						align-items: center;
						margin-left: 20rpx;
					}
				}
				.drop-dowm-img{
					width: 30rpx;
					height: 30rpx;
					margin-right: 10rpx;
				}
			}
			._main-content{
				width: 100%;
				box-sizing: border-box;
				padding: 0 40rpx;
				// ._main-content-header{
				// 	width: 100%;
				// 	height: 80rpx;
				// 	display: flex;
				// 	flex-wrap: nowrap;
				// 	justify-content: flex-start;
				// 	align-items: center;
				// 	position: relative;
				// 	margin-top: 20rpx;
				// 	.line-img{
				// 		width: 9rpx;
				// 		height: 30rpx;
				// 		position: absolute;
				// 		top: 0;
				// 		left: 0;
				// 		right: 0;
				// 		bottom: 0;
				// 		margin: auto;
				// 		margin-left: 0;
				// 	}
				// 	._header-title{
				// 		font-size: 36rpx;
				// 		color: #000;
				// 		font-weight: 800;
				// 		margin-left: 20rpx;
				// 	}
				// 	._header-chunk{
				// 		display: flex;
				// 		flex-wrap: nowrap;
				// 		justify-content: space-between;
				// 		align-items: center;
				// 		min-width: 200rpx;
				// 		max-width: 236rpx;
				// 		background-color: #f6f6f6;
				// 		border-radius: 10px;
				// 		font-size: 30rpx;
				// 		color: #000;
				// 		height: 60rpx;
				// 		margin-left: 12rpx;
				// 	}
				// 	._main-item-val-input{
				// 		text-align: left;
				// 		display: flex;
				// 		._main-item-val-input-text{
				// 			display: flex;
				// 			flex-wrap: nowrap;
				// 			align-items: center;
				// 			margin-left: 20rpx;
				// 		}
				// 	}
				// 	.drop-dowm-img{
				// 		width: 30rpx;
				// 		height: 30rpx;
				// 		margin-right: 10rpx;
				// 	}
				// }
				._main-content-map{
					width: 100%;
					background-color: #fff;
					margin-top: 20rpx;
					._map-box{
						width: 100%;
						text-align: center;
						font-size: 30rpx;
						height: 300rpx;
					}
				}
				._main-content-info{
					width: 100%;
					box-sizing: border-box;
					padding:30rpx 0;
					background-color: #fff;
					._main-content-info-header{
						width: 100%;
						height: 80rpx;
						display: flex;
						flex-wrap: nowrap;
						justify-content: flex-start;
						align-items: center;
						position: relative;
						.line-img{
							width: 9rpx;
							height: 30rpx;
							position: absolute;
							top: 0;
							left: 0;
							right: 0;
							bottom: 0;
							margin: auto;
							margin-left: 0;
						}
						._header-title{
							font-size: 32rpx;
							color: #000;
							font-weight: 800;
							margin-left: 20rpx;
						}
					}
					._main-content-info-chunk{
						width: 100%;
						font-size: 28rpx;
						margin-left: 10rpx;
						letter-spacing: 2rpx;
						line-height: 44rpx;
						._chunk-label{
							color: #010101;
						}
						._chunk-val{
							color: #666666;
						}
					}
				}
				._main-content-option{
					width: 100%;
					height: 80rpx;
					background-color: #037aff;
					border-radius: 10rpx;
					font-size: 32rpx;
					color: #fff;
					text-align: center;
					line-height: 80rpx;
					margin-top: 30rpx;
				}
			}
		}

	}
</style>
